<template>
  <div id="KnowledgeContent">
    <div class="totalDiv">
      <div class="bodyDiv">
        <el-scrollbar style="width:100%;height: 100%">
          <div class="bodysTop">
            <div class="headerTitle">
              <span>{{ contentObject.title }}</span>
            </div>
            <p v-html="contentObject.content"></p>
          </div>
        </el-scrollbar>
      </div>
      <div class="footerDiv">
        <el-card>
          <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
            <el-tab-pane label="问题" name="issueTab">
              <el-scrollbar style="height: 100%">
                <div style="margin-top: 5px" v-for="(item, index) in contentObject.wkKnowledgeIssueList" :key="index">
                  <router-link :to="{ path: '/knowledgeissoe', query: { param1: item.id } }">
                    <a href="">{{ item.title }}</a>
                  </router-link>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="培训"> </el-tab-pane>
            <el-tab-pane label="试题">
              <KnowledgeTests  ref="KnowledgeTestsRef"/>
            </el-tab-pane>
            <el-tab-pane label="考试"> </el-tab-pane>
            <el-tab-pane label="修改记录" name="approvalTab">
              <el-scrollbar>
                <KnowledgeApprovalList ref="approvalListRef" />
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 =========
import { ref, reactive, defineExpose, getCurrentInstance, onMounted } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import KnowledgeApprovalList from './KnowledgeApprovalList.vue'; //失控记录图表
import KnowledgeTests from './KnowledgeTests.vue';//知识库试题

defineExpose({
  getContentListByCatalog,
  initPage
});
// 变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let activeName = ref('issueTab');
let contentId = null;
let knowledgeId = null;
let KnowledgeTestsRef:any = ref(null)//知识库试题页签标记

let approvalListRef: any = ref(null);

let contentObject = reactive({
  id: '',
  knowledgeId: '',
  catalogId: '',
  orgId: '',
  title: '',
  content: '',
  seq: 0,
  wkKnowledgeIssueList: []
});
let knowledgeContentId = ref('');

// ============ 方法定义区
onMounted(() => {
  knowledgeContentId.value = proxy.$route.query.param1;
  getContentListByCatalog(knowledgeContentId.value);
});

function initPage(row1: string, row2: string) {
  knowledgeId = row1;
  contentId = row2;
}

// 根据目录表id获取内容数据
function getContentListByCatalog(id: any) {
  contentId = id;
  const url = '/api/wk/wkKnowledgeContent/getContentListById/' + id;
  proxy.$http
    .get(url)
    .then((res: any) => {
      Object.assign(contentObject, res.data);
      if (activeName.value == 'approvalTab') {
        approvalListRef.value.initPage(contentId);
      }
      KnowledgeTestsRef.value?.initPage(knowledgeId, contentId, true);
      KnowledgeTestsRef.value?.findTestQuestionList() // 获取知识库表格数据
      KnowledgeTestsRef.value?.getQuestionType(); // 获取题目类型选项
    })
    .catch((err: any) => {
      VxeMessage('获取内容失败', VxeNotifyType.error);
    });
}

function tabHandleClick(tab) {
  if (tab.index == 4) {
    approvalListRef.value.initPage(contentId);
  }
  if (tab.index == 2) {
    KnowledgeTestsRef.value?.initPage(knowledgeId, contentId, true);
    KnowledgeTestsRef.value?.findTestQuestionList() // 获取知识库表格数据
    KnowledgeTestsRef.value?.getQuestionType(); // 获取题目类型选项
  }
}
</script>

<style lang="scss" scoped>
#KnowledgeContent {
  width: 100%;
  height: 100%;
  .totalDiv {
    width: 100%;
    height: 100%;
    .bodyDiv {
      width: 100%;
      height: 70%;
      display: flex;
      :deep(.el-scrollbar__view) {
        width: 100%;
        height: 100%;
        .bodysTop {
          padding: 10px;
          height: calc(100% - 20px);
        }
        .headerTitle {
          text-align: center;
          span {
            font-size: 20px;
            font-weight: 700;
          }
        }
      }
    }
    .footerDiv {
      margin-top: 10px;
      width: 100%;
      height: calc(30% - 10px);
      .el-card {
        height: 100%;
        :deep(.el-card__body) {
          padding: 0;
          height: 100%;
          .el-tabs {
            height: 100%;
           .el-tabs__content {
             padding: 0;
              height: calc(100% - 39px);
              .el-tab-pane {
                height: 100%;
              }
              #pane-issueTab,#pane-1 {
                padding: 10px 0 0 15px;
                height: calc(100% - 10px);
              }
            }
          }
        }
      }
    }
  }
}
</style>
